import React,{Component} from 'react';
import {Grid,Search,Dialog,Button} from '@alifd/next'
import { number } from 'prop-types';

const { Row, Col } = Grid;


interface S {
    Binary: String,
    visible:boolean
}

class Algorithm extends Component<null,S>{

    state = {
        Binary: null,
        visible:false
    }

    // 十进制转换二进制，除2取余法，通过递归连续除以2得到的余数
    Enter = (value:String):void => {
        const Num = Number(value);
        const toBinary = (num:number):any => {
            const binary = [];
            function crossover (int:number){
                const integer = parseInt((int / 2) + "")
                if(int >= 1){
                    crossover(integer);
                    binary.push(int % 2) 
                }
            }
            crossover(num);
            return binary
           
        }

        this.setState({
            Binary:toBinary(Num).join(""),
            visible:true
        })

    }
     render(){
         const {Binary,visible} = this.state;

         return (
             <>
                <head><title>十进制转换二进制，除2取余法，通过递归连续除以2得到的余数</title></head>
                <div role="grid" style={{padding:20}}>
                    <Row wrap >
                        <Col span={24}>
                            <h3 style={{textAlign:"center",margin:20,fontSize:20,color:"#666"}}>十进制转换二进制，除2取余法，通过递归连续除以2得到的余数</h3>
                        </Col>
                        <Col span={24} align="center">
                        <Search
                            style={{margin:"0 auto",display:'block'}}
                            searchText="转换"
                            hasIcon={false}
                            type="primary" 
                    
                            onSearch={this.Enter}
                        />
                        </Col>
                        <Col span={24} >
                            <img style={{width:700,margin:'0 auto',display:'block'}} src="/static/code.png" />
                        </Col>
                        <Col span={24}>
                        <Dialog
                            isFullScreen
                            style={{width:500}}
                            title="转换的二进制"
                            visible={visible}
                            footer={
                            <Button  
                            type="primary" 
                            onClick={():any=>this.setState({visible:false})}
                            >
                                确定
                            </Button>}
                            onClose={():any=>this.setState({visible:false})}
                            >
                            {Binary}
                        </Dialog>
                        </Col>
                    </Row>
                </div>
            </>
         )
     }
}

export default Algorithm